<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-fold"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>系统菜单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="菜单名称">
            <el-input v-model="menusname" placeholder="请输入菜单名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click=getSearchMenusList>筛选</el-button>
            <el-button @click="clearSearch">清空筛选条件</el-button>
          </el-form-item>
        </el-form>

        <el-row style="margin-bottom: 10px;">
          <el-button type="primary" @click="addMenus"> 新增菜单</el-button>
        </el-row>
      </div>


      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="menusname" label="菜单名称" width="150">
        </el-table-column>
        <el-table-column prop="level" label="菜单类型" width="150">
        </el-table-column>
        <el-table-column prop="icon" label="图标" width="150">
        </el-table-column>
        <el-table-column prop="assembly" label="组件" width="150">
        </el-table-column>
        <el-table-column prop="path" label="路径">
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="50">
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="{row}">
            <el-button type="warning" plain @click="editMenu(row.id)" style="margin-right: 10px;">修改</el-button>
            <el-dropdown split-button type="primary">
              更多菜单
              <el-dropdown-menu slot="dropdown">
                <el-button @click="addChildMenus">添加下级</el-button>
                <el-button type="danger" @click="deleteMenus(row.id)">删除</el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:center;margin-top: 20px;" @current-change="getMenusList"
        @size-change="getMenusList" :current-page.sync="pageInfo.pageNum" :page-sizes="[3, 5, 10, 20]"
        :page-size.sync="pageInfo.pageSize" layout="prev, pager, next,total,jumper,->, sizes" :total="pageInfo.total"
        :pager-count="7">
      </el-pagination>
    </el-card>


    <el-dialog title="新增菜单" :visible.sync="formTable" destroy-on-close>
      <AddMenu :id="id"></AddMenu>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formTable = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import AddMenu from './AddMenu.vue';

export default {
  name: 'SystemMenu',
  components: {
    AddMenu,
  },
  data() {
    return {
      id: '',
      formTable: false,
      pageInfo: {
        pageNum: 1,
        pageSize: 3,
        total: 20,
      },
      menusname: '',
      tableData: [],
      loading: false,
    }
  },
  mounted() {
    this.getMenusList();
  },
  methods: {
    async getMenusList() {
      this.loading = true;
      let { pageSize, pageNum } = this.pageInfo;
      let { menusname } = this;
      let res = await this.$API.SystemMenus.reqAllMenus(pageNum, pageSize, menusname);
      if (res.code == 200) {
        this.pageInfo.total = res.data.total;
        this.tableData = res.data.list;
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
        this.$message({ message: '没有数据', type: 'error' })
      }
      this.loading = false;
    },
    async getSearchMenusList() {
      this.pageInfo.pageNum = 1;
      await this.getMenusList();
      if (this.tableData.length > 0) {
        this.$message({ message: '查询成功', type: 'success' })
      }
    },
    clearSearch() {
      this.menusname = '';
      this.pageInfo.pageNum = 1;
      this.getMenusList();
    },
    addMenus() {
      this.formTable = true;
    },
    editMenu(id) {
      this.id = id;
      this.formTable = true;
    },
    addChildMenus() {
      this.$message({ message: '接口异常，请联系管理员', type: 'error', })
    },
    deleteMenus(id) {
      this.$confirm('确定删除该用户吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$API.SystemMenus.reqDeleteMenus(id);
        if (res.code == 1) {
          this.pageInfo.pageNum = 1;
          this.$message({ message: '删除成功', type: 'success' })
        }
        this.getMenusList();
        this.$message({ type: 'success', message: '删除成功!' });
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' });
      });
    },
    submitForm() {
      this.$bus.$emit('toAddMenus');
      this.formTable = false;
      // 由于抛出事件是异步代码，因此下方的先进入了消息队列，需要让下方的代码也异步执行
      setTimeout(() => {
        this.getMenusList();
      }, 100);
    }
  }
};
</script>

<style scoped></style>
